<template>
  <div class="desktop-wallpaper">
    <!-- 静态图片壁纸 -->
    <div 
      v-if="wallpaper.type === 'image'" 
      class="wallpaper-image"
      :style="{ backgroundImage: `url(${wallpaper.url})` }"
    ></div>
    
    <!-- 动态背景 -->
    <component 
      v-else-if="wallpaper.type === 'dynamic'" 
      :is="wallpaper.component"
      :config="wallpaper.config"
    />
  </div>
</template>

<script setup>
defineProps({
  wallpaper: {
    type: Object,
    required: true
  }
})
</script>

<style scoped>
.desktop-wallpaper {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  overflow: hidden;
}

.wallpaper-image {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}
</style>

